<template>
  <div class="foot">
    <!-- 第一部分 -->
    <div class="box1">
      <h1>今日主推宣传片</h1>
      <input type="file" @change="uploadVideo" />
      <div class="sp_1" v-if="videoUrl">
        <video
          ref="videoPlayer"
          :src="videoUrl"
          :controls="false"
          style="width: 400px; height: 400px"
        ></video>
        <button @click="playVideo">播放</button>
        <button @click="pauseVideo">暂停</button>
        <p>浏览量：{{ num }}</p>
      </div>
      <div class="sp_2" v-else>
        <img
          src="https://img0.baidu.com/it/u=3884663279,3256131687&fm=253&fmt=auto&app=120&f=JPEG"
          style="width: 600px; height: 350px"
        />
      </div>
    </div>
    <!-- 第二部分 -->
    <div class="box2">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="(image, index) in item" :key="index">
          <img :src="image" style="width: 400px; height: 180px" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 第三部分 -->
    <div class="box3">
      <h1>今日推送信息</h1>
      <p>
        本店专注于提供婚姻介绍和服务的机构,致力于帮助单身男女找到他们的理想伴侣，
        协助他们建立幸福、稳定的婚姻关系。本团队由经验丰富的婚姻专家和红娘组成，
        他们具有丰富的婚介行业经验和深厚的人际关系资源。
        如果您正寻找一个可靠的婚介机构，请考虑本店铺。
        我们期待着帮助您迈向美满的婚姻生活！
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
// 使用 vue3 的 `ref` 来创建响应式数据
import { ref, onUpdated, onUnmounted, watch } from "vue";

const videoUrl = ref("");
const num = ref<number>(0);
const videoPlayer = ref<HTMLVideoElement | null>(null);
//当前时间记录
const currentTime = ref<number>(0);
const item = ref<string[]>([
  "https://img0.baidu.com/it/u=3884663279,3256131687&fm=253&fmt=auto&app=120&f=JPEG",
  "https://img1.baidu.com/it/u=4064190350,3467142496&fm=253&fmt=auto&app=120&f=JPEG",
  "https://img2.baidu.com/it/u=543236298,3867804863&fm=253&fmt=auto&app=138&f=JPEG",
  "https://img2.baidu.com/it/u=3900428236,2069618052&fm=253&fmt=auto&app=120&f=JPEG",
]);

function uploadVideo(event: any) {
  const file = event.target.files[0];
  if (file) {
    console.log(file);
    // 上传成功后，将视频的 URL 赋值给 videoUrl
    videoUrl.value = URL.createObjectURL(file);
  }
}

// 播放操作
const playVideo = () => {
  if (videoPlayer.value) {
    videoPlayer.value.play();
  }
};

// 暂停按钮
const pauseVideo = () => {
  if (videoPlayer.value) {
    videoPlayer.value.pause();
  }
};

// 组件更新完成后执行，如果存在视频标签，就为其添加事件 timeupdate
// 然后执行 handleTimeoutUpdate 函数
onUpdated(() => {
  if (videoPlayer.value) {
    videoPlayer.value.addEventListener("timeupdate", handleTUpdate);
  }
});

// 挂载完成
onUnmounted(() => {
  if (videoPlayer.value) {
    videoPlayer.value.removeEventListener("timeupdate", handleTUpdate);
  }
});

// 视频播放时间更新处理函数
function handleTUpdate() {
  if (videoPlayer.value) {
    currentTime.value = Math.floor(videoPlayer.value.currentTime);
  }
}

// 监听当前时间，对浏览量进行处理
watch(currentTime, (newTime) => {
  if (newTime % 3 === 0) {
    num.value++;
  }
});
</script>

<style lang="scss" scoped>
.foot {
  height: 550px;
  overflow: hidden;
  .box1 {
    float: left;
    width: 700px;
    height: 480px;
    background-color: rgb(171, 240, 243);
    margin-left: 50px;
    margin-top: 25px;
    h1 {
      text-align: center;
      line-height: 30px;
      font-size: 30px;
      font-weight: 540;
      margin: 14px;
      color: #052a12;
    }
    // 设置存放视频的区域
    .sp_1 {
      video {
        float: left;
        margin-left: 30px;
      }
      button {
        float: left;
        margin-left: 10px;
        margin-top: 200px;
        width: 50px;
        height: 40px;
        font-size: 14px;
        border-radius: 30%;
        border-style: none;
        background-color: rgb(253, 203, 211);
      }
      p {
        line-height: 40px;
        font-size: 20px;
        float: left;
        margin-left: 20px;
      }
    }
    .sp_2 {
      img {
        margin-top: 20px;
        margin-left: 40px;
      }
    }
  }
  .box2 {
    float: left;
    width: 400px;
    height: 180px;
    background-color: rgb(163, 240, 243);
    margin-left: 30px;
    margin-top: 25px;
    overflow: hidden;
  }
  .box3 {
    float: left;
    width: 400px;
    height: 275px;
    background-color: rgb(163, 240, 243);
    margin-left: 30px;
    margin-top: 25px;
    overflow: hidden;
    h1 {
      text-align: center;
      line-height: 20px;
      font-size: 20px;
      margin: 10px;
      font-weight: 600;
      color: rgb(248, 122, 206);
    }
    p {
      text-indent: 2em;
      text-align: justify; // 两端对齐，自动填充空白空间
      text-align-last: justify; // 兼容性设置，确保在某些浏览器上也能生效
      margin: 6px;
      line-height: 34px;
      font-size: 16px;
    }
  }
  
}
</style>
